<template>
  <div>
    <!-- -->
    <van-nav-bar title="注册" left-text="登录" @click-left="onClickLeft" />
    <!-- -->
    <van-form @submit="onEnroll">
      <van-field v-model="username" name="用户名" label="用户名：" placeholder="用户名"
        :rules="[{ pattern: /^[\w-]{4,16}$/, message: '请填写用户名(包含4到16个字符，且只能包含字母、数字、连字符或下划线)' }]" />
      <van-field v-model="password" :type="passwordType" name="密码" label="密码：" placeholder="密码"
        :rules="[{ pattern: /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/, message: '请填写密码(密码至少6位，至少1个大写字母，1个小写字母，1个数字，1个特殊字符)' }]">
        <template slot="right-icon">
          <span class="solts" @click="switchPasswordType">
            <van-icon name="closed-eye" v-if="passwordType === 'password'" />
            <van-icon name="eye-o" v-else />
          </span>
        </template>
      </van-field>
      <van-field v-model="password1" :type="passwordType" name="确认密码" label="确认密码：" placeholder="确认密码"
        :rules="[{ message: '请确认密码填写' }]">
        <template slot="right-icon">
          <span class="solts" @click="switchPasswordType">
            <van-icon name="closed-eye" v-if="passwordType === 'password'" />
            <van-icon name="eye-o" v-else />
          </span>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import localforage from 'localforage';

export default {
  name: 'Vue2Enroll',

  data() {
    return {
      username: '',
      password: '',
      password1: '',
      userList: [],
      passwordType: 'password',
    };
  },

  mounted() {

  },

  methods: {
    onClickLeft() {
      this.$router.replace("/Login");
    },

    onEnroll() {
      localforage.getItem('userList').then(result => {
        let isUsernameDuplicate = false;
        //添加了一个名为isUsernameDuplicate的布尔变量，用于标记是否找到了重复的用户名。
        //在遍历result时，如果发现有相同的用户名，就将isUsernameDuplicate设置为true。
        if (result !== null) {
          result.forEach(user => {
            if (this.username === user.username) {
              isUsernameDuplicate = true;
            }
          });
          //用户名不重复且两次输入的密码相同
          if (!isUsernameDuplicate && this.password === this.password1) {
            result.push({ username: this.username, password: this.password, id: new Date().getTime() });
            // 将更新后的userList保存回localforage
            localforage.setItem('userList', result).then(() => {
              // 处理保存成功
              this.$toast.success("保存成功！")
              this.$router.replace("/Login");

              console.log('保存成功');
              console.log('保存的数据为：', result);
            }).catch(err => {
              // 处理保存失败
              console.error('保存失败：', err);
            });
          } else {
            this.$toast.fail("用户名或密码重复！")
          }
        } else {
          if (this.password !== this.password1) {
            this.$toast.fail("请确保两次密码一致！")
          } else {
            this.userList.push({ username: this.username, password: this.password, id: new Date().getTime() });
            localforage.setItem('userList', this.userList).then(result => {
              // 处理保存成功
              this.$toast.success("保存成功！")
              this.$router.replace("/Login");

              console.log('保存成功');
              console.log('保存的数据为：', result);
            }).catch(err => {
              // 处理保存失败
              console.error('保存失败：', err);
            });
          }
        }
      });



      //判断用户名是否重复
      // localforage.getItem('userList').then(result => {
      //   if (result !== null) {
      //     result.forEach(user => {
      //       if (this.username !== user.username || this.password !== this.password1) {
      //         result.push({ username: this.username, password: this.password, id: new Date().getTime() });
      //         // 将更新后的userList保存回localforage
      //         localforage.setItem('userList', result).then(() => {
      //           // 处理保存成功
      //           this.$toast.success("保存成功！")
      //           this.$router.replace("/Login");

      //           console.log('保存成功');
      //           console.log('保存的数据为：', result);
      //         }).catch(err => {
      //           // 处理保存失败
      //           console.error('保存失败：', err);
      //         });
      //       } else {
      //         this.$toast.fail("用户名或密码重复！")
      //       }
      //     });

      //   } else {
      //     if (this.password !== this.password1) {
      //       this.$toast.fail("请确保两次密码一致！")
      //     } else {
      //       this.userList.push({ username: this.username, password: this.password, id: new Date().getTime() });
      //       localforage.setItem('userList', this.userList).then(result => {
      //         // 处理保存成功
      //         this.$toast.success("保存成功！")
      //         this.$router.replace("/Login");

      //         console.log('保存成功');
      //         console.log('保存的数据为：', result);
      //       }).catch(err => {
      //         // 处理保存失败
      //         console.error('保存失败：', err);
      //       });
      //     }
      //   }
      // });

      //判断2次密码是否一致
      // if (this.password !== this.password1) {
      //   this.$toast.fail("2次密码必须一致")
      // };
      //保存用户信息
      // this.userList.push({ username: this.username, password: this.password, id: new Date().getTime() });
      // localforage.setItem('userList', this.userList).then(result => {
      //   // 处理保存成功
      //   console.log('保存成功');
      //   console.log('保存的数据为：', result);
      // }).catch(err => {
      //   // 处理保存失败
      //   console.error('保存失败：', err);
      // });
      // localforage.getItem('userList').then(result => {
      //   result.forEach(user => {
      //     console.log(user.username);
      //   });
      // }).catch(err => {
      //   // 处理读取失败
      //   console.error('读取用户列表时发生错误：', err);
      // });


    },

    switchPasswordType() {
      this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
    }
  },
};
</script>
<style scoped></style>